class SoilMonitoring {
    constructor() {
        this.distChart = null;
        this.trendChart = null;
        this.initCharts();
        this.initEventListeners();
    }

    initCharts() {
        // 初始化土壤含水量分布图表
        const distCtx = document.getElementById('soilMoistureDistChart').getContext('2d');
        this.distChart = new Chart(distCtx, {
            type: 'bar',
            data: {
                labels: ['区域1', '区域2', '区域3', '区域4', '区域5'],
                datasets: [{
                    label: '土壤含水量 (%)',
                    data: [25, 30, 28, 32, 27],
                    backgroundColor: 'rgba(24, 144, 255, 0.6)',
                    borderColor: 'rgba(24, 144, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });

        // 初始化土壤水分趋势图表
        const trendCtx = document.getElementById('soilMoistureTrendChart').getContext('2d');
        this.trendChart = new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: this.generateTimeLabels(24),
                datasets: [{
                    label: '土壤含水量 (%)',
                    data: this.generateMockData(24),
                    borderColor: 'rgba(24, 144, 255, 1)',
                    tension: 0.4,
                    fill: true,
                    backgroundColor: 'rgba(24, 144, 255, 0.1)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    }

    initEventListeners() {
        // 深度选择器事件监听
        document.getElementById('depth-selector').addEventListener('change', (e) => {
            this.updateDistChart(e.target.value);
        });

        // 时间范围选择器事件监听
        document.getElementById('time-range').addEventListener('change', (e) => {
            this.updateTrendChart(parseInt(e.target.value));
        });
    }

    generateTimeLabels(hours) {
        const labels = [];
        const now = new Date();
        for (let i = hours - 1; i >= 0; i--) {
            const time = new Date(now - i * 3600000);
            labels.push(`${time.getHours()}:00`);
        }
        return labels;
    }

    generateMockData(count) {
        return Array.from({length: count}, () => 25 + Math.random() * 10);
    }

    updateDistChart(depth) {
        // 模拟不同深度的数据
        const mockData = this.generateMockData(5);
        this.distChart.data.datasets[0].data = mockData;
        this.distChart.update();
    }

    updateTrendChart(hours) {
        this.trendChart.data.labels = this.generateTimeLabels(hours);
        this.trendChart.data.datasets[0].data = this.generateMockData(hours);
        this.trendChart.update();
    }

    refreshCharts() {
        if (this.distChart) {
            this.updateDistChart(document.getElementById('depth-selector').value);
        }
        if (this.trendChart) {
            this.updateTrendChart(parseInt(document.getElementById('time-range').value));
        }
    }

    // 添加实时数据更新方法
    startRealTimeUpdate() {
        // 每30秒更新一次数据
        setInterval(() => {
            this.updateDistChart(document.getElementById('depth-selector').value);
            this.updateTrendChart(parseInt(document.getElementById('time-range').value));
            this.updateAlerts();
        }, 30000);
    }

    // 添加预警信息更新方法
    updateAlerts() {
        const alertList = document.querySelector('.alert-list');
        const mockAlerts = this.generateMockAlerts();
        
        alertList.innerHTML = mockAlerts.map(alert => `
            <div class="alert-item ${alert.type}">
                <i class="fas fa-exclamation-triangle"></i>
                <div class="alert-content">
                    <div class="alert-title">${alert.title}</div>
                    <div class="alert-desc">${alert.description}</div>
                </div>
                <div class="alert-time">${alert.time}</div>
            </div>
        `).join('');
    }

    generateMockAlerts() {
        // 生成模拟预警数据
        return [
            {
                type: 'warning',
                title: '区域1土壤水分偏低',
                description: '当前值: 15% | 阈值: 20%',
                time: '10分钟前'
            },
            {
                type: 'info',
                title: '区域3土壤水分正常',
                description: '当前值: 25% | 阈值: 20%',
                time: '5分钟前'
            }
        ];
    }
}

// 初始化土壤墒情监测
const soilMonitoring = new SoilMonitoring(); 